<template>
  <div class="scroll-banner" ref="scroll-banner">
    <div class="address" @click="$router.push('/chooseCity')">{{currentCity}}</div>
    <div class="search" @click="$router.push('/search')"></div>
    <mt-swipe :auto="4000">
        <mt-swipe-item  v-for="(item,index) in bannerList" :key="index">
          <div style="width: 100%;height: 100%;" @click="_redirectTo(item.jumpContent)">
            <img :src="item.bannerPicUrl" alt="" style="width: 100%;height: 100%">
          </div>
        </mt-swipe-item>
    </mt-swipe>
  </div>
</template>

<script>
  import "mint-ui/lib/style.css"
  import { Swipe, SwipeItem } from 'mint-ui'
  import {getSession, setSession} from "../../common/js/sessionStorage";
  import {MP} from '../../common/js/map'

  export default {
        name: "scrollBanner",
        props:{
          bannerList:{
            type:Array,
            default(){
              return []
            }
          },

        },
        data(){
          return{
            currentCity:''
          }
        },
        mounted() {
          let clientWidth = document.body.clientWidth
          this.$refs['scroll-banner'].style.height = (clientWidth/75*44)+'px'
          this.$nextTick(()=>{
            MP(global.MAP_AK).then(BMap =>{
              let geolocation = new BMap.Geolocation()
              geolocation.getCurrentPosition((res)=>{
                setSession('point',res.point)
                setSession('currentCity',res.address.city)
                this.currentCity = getSession('currentCity')
                  setSession('currentCity',res.address.city)
              })
            })
            this.currentCity = getSession('currentCity')
          })
        },
        methods:{
          //banner跳转
          _redirectTo(url){
            this.$router.push({path:'/iframeBox',query:{name:'',url:url}})
          }
        },
    }
</script>

<style scoped lang="stylus">
  .scroll-banner
    color #2b81af
    position relative
    .address
      position absolute
      top 20px
      left 10px
      width 56px
      height 26px
      background rgba(0,0,0,0.1) url("arrow_bottom.svg") no-repeat 53px center / 8px 4px
      z-index 1000
      font-size 14px
      line-height 26px
      color #ffffff
      border-radius 13px
      padding-right 10px
      &:active
        background rgba(255,209,33,.8) url("arrow_bottom.svg") no-repeat 53px center / 8px 4px

    .search
      position absolute
      top 20px
      right 10px
      z-index 1000
      width 26px
      height 26px
      border-radius 13px
      background rgba(0,0,0,.1) url("btn-search.svg")no-repeat center center /16px 17px
</style>
